<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>webSocket</title>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <style>
        #groupChat {
            width: 80%;
            height: 300px;
            background-color: papayawhip;
            float: left;
            overflow: auto;

        }

        #chatList {
            width: 20%;
            background-color: #F2F2F2;
            overflow: auto;
        }

        #privateChat {
            width: 80%;
            height: 300px;
            background-color: #FFEEE8;
            float: left;
            overflow: auto;
        }

        li {
            text-align: center;
        }
    </style>
</head>

<body>


    <!--   socket url -->
    <input type="hidden" th:value="${path}" id="path" style="display: none" />
    <!--  用户名 -->
    <span>欢迎</span>
    <span  th:if="${session.user} ne null" th:text="${session.user.getUserName()}" id="myName"></span>

    <br>

    <span id="groupChat">
        <li>群聊信息</li>
    </span>
    <span id="chatList">
        <li>在线用户--[0]</li>
    </span>

    <textarea id="text" placeholder="请输入内容-发送消息[Ctrl+回车键]" rows="3%" cols="60%"></textarea>
    <input onclick="send()" type="button" value="发送">
    <span>消息发送至:</span>
    <select id="onLineUser" size="1" style="width: 10%;height:30px" title="选择发送的对象">
        <option value="所有人">所有人</option>
    </select>


    <div id="privateChat">
        <li>私聊信息</li>
    </div>
</body>
<script type="text/javascript">

    var groupChat = document.getElementById("groupChat");  //群聊
    var chatList = document.getElementById("chatList");  //在线列表
    var privateChat = document.getElementById("privateChat");//私聊
    var onLineUser = document.getElementById("onLineUser");  //发送人select选择框
    var myName = document.getElementById("myName").innerText;

    var webSocket;
    // http:
    if ("WebSocket" in window) {
        webSocket = new WebSocket(document.getElementById('path').value + myName);
        //连通之后的回调事件
        webSocket.onopen = function () {
            groupChat.innerHTML+=" <li>系统消息:[登陆成功]</li>"
        };

        //接收后台服务端的消息
        webSocket.onmessage = function (evt) {
            var receivedData = evt.data;           //接收到的数据
            var object = JSON.parse(receivedData);    //json数据
            var type = object.messageType;      //数据类型（1上线/2下线/3在线名单/4发信息)
            var currentUserName = object.currentUserName;         //上线的某个用户名
            var userNames = object.userNames;  //所有在线用户
            //上线通知+在线列表刷新
            if (type === 1) {
                if ((currentUserName !== myName)) { //展示除自己的所有用户
                    groupChat.innerHTML+= " <li>系统消息:[" + currentUserName + "]上线了" + "</li>";
                    onLineUser.innerHTML+= "<option  value='" + currentUserName + "'>" + currentUserName + "</option>";
                }
                chatList.innerHTML="<li>在线用户--[" + userNames.length + "]</li>";
                for (var i = 0; i < userNames.length; i++) {//展示所有用户,包括自己
                    chatList.innerHTML+= "<li style='text-align: left'>---" + userNames[i] + "</li>";
                }
                //chatList.innerHTML+=" <li>"+ currentUserName +"</li>";
            }
            //下线通知+在线列表刷新
            else if (type === 2) {
                if ((currentUserName !== myName)) { //展示除自己的所有用户
                    groupChat.innerHTML+= " <li>系统消息:[" + currentUserName + "]下线了" + "</li>";
                }
                chatList.innerHTML="<li>在线用户--[" + userNames.length + "]</li>";
                onLineUser.innerHTML="<option  value='所有人'>所有人</option>";
                for (var i = 0; i < userNames.length; i++) {
                    if ((userNames[i] !== myName)) { //展示除自己的所有用户
                        chatList.innerHTML+= "<li style='text-align: left'>---" + userNames[i] + "</li>";
                        onLineUser.innerHTML+= "<option  value='" + userNames[i] + "'>" + userNames[i] + "</option>";
                    }
                }
            }
            //在线列表
            else if (type === 3) {
                chatList.innerHTML="<li>在线用户--[" + userNames.length + "]</li>";
                onLineUser.innerHTML="<option  value='所有人'>所有人</option>";
                for (var i = 0; i < userNames.length; i++) {
                    if (userNames[i] !== myName) { //展示除自己的所有用户
                        chatList.innerHTML+=" <li style='text-align: left'>---" + userNames[i] + "</li>";
                        onLineUser.innerHTML+= "<option  value='" + userNames[i] + "'>" + userNames[i] + "</option>";
                    }
                }
            }
            //信息接收
            else {
                if (object.fromUser !== myName) {    //自己不接自己的消息
                    if (object.targetUser === "所有人") {
                        //发给所有人
                        groupChat.innerHTML+= " <li style='text-align: left'>[" + object.fromUser + "]说:-" + object.content + "</li>";
                    } else {
                        //发给指定人
                        privateChat.innerHTML+=" <li style='text-align: left'>[" + object.fromUser + "]说:-" + object.content + "</li>";
                    }
                }
            }
        };

        //连接关闭的回调事件
        webSocket.onclose = function () {
            console.log("连接已关闭...");
            setMessageInnerHTML("连接已经关闭....");
        };
    }
    else {
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //信息发送+ 页面显示发送信息
    function send() {
        var usernameX = myName;         //发送数据人
        var usernameY = document.getElementById("onLineUser").value;      //接收数据人
        var text = document.getElementById("text").value;
        console.log(usernameY);
        if (usernameY === "所有人") {
            usernameY = "All";
            groupChat.innerHTML+=" <li style='text-align: right'>" + text + " -- [" + usernameX + "]</li>";
        }
        else {
            privateChat.innerHTML+= " <li style='text-align: right'>" + "你对-[" + usernameY + "]说:-" + text + "</li>";
        }
        var message = {
            "content": text,
            "fromUser": usernameX,
            "targetUser": usernameY
        };
        //发送数据
        webSocket.send(JSON.stringify(message));
        document.getElementById("text").value="";
    }
    window.onbeforeunload = function(){webSocket.close(); }
</script>

</html>